<template>
  <div id="radio-div">
    <van-cell :title="title"
              is-link
              position="bottom"
              @click="showPopup"
              :required="true" />
    <van-popup v-model="show"
               closeable
               @close="onClose">

      <center>请选择来访缘由</center>
      <div class="visitor-radio-box">
        <van-radio-group v-model="radio">
          <van-radio v-for="(item,index) in items"
                     :key="index"
                     :name="index+1"
                     style="{width:'200%';margin-top:8px;}"
                     checked-color="#ffb6c1">{{item}}</van-radio>
        </van-radio-group>
      </div>
      <van-button class="already visitor-btn"
                  color="#ffb6c1"
                  plain
                  @click="ClosePopup">确定</van-button>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'VisitorReason',
  // props: [
  //   'choose'
  // ],
  data () {
    return {
      show: false,
      index: 1,
      radio: 1,
      items: ['探访亲朋', '家政服务', '快递配送', '外卖配送', '户内维修', '看房', '装修', '其他'],
      title: '来访缘由:探访亲朋'
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onClose () {
      // 向父组件传值
      this.title = `来访缘由:${this.items[this.radio - 1]}`
      this.$emit('setReason', this.items[this.radio - 1])
    },
    ClosePopup () {
      // 关闭弹窗
      this.show = false
    }
  }
}
</script>
<style scoped>
.van-popup.van-popup--center {
  width: 70%;
  height: auto;
}
.van-cell__title {
  text-align: left;
}
center {
  margin: 5%;
}
.visitor-radio-box {
  margin-left: 30%;
}
.visitor-btn {
  width: 70px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
